<template>
	<nav-bar class="sticky" :isItem="true">
		<view slot="left" class="btn" @click="back">
			<image class="image" src="../../../static/img/common/left-arrow.svg" alt="" />
		</view>
		<view slot="center" style="font-size: 36rpx;">{{ text }}</view>
		<view slot="right" class="btn">
			<view v-if="!close" class="text" @click="edit">
				<view v-show="!editing">编辑</view>
				<view v-show="editing">完成</view>
			</view>
		</view>
	</nav-bar>
</template>

<script>
	import NavBar from "../NavBar/NavBar";

	export default {
		components: {
			NavBar
		},
		props: {
			text: {
				type: String,
				default () {
					return "";
				},
			},
			path: {
				type: String,
				default () {
					return "";
				},
			},
			close: {
				type: Boolean,
				default () {
					return false;
				},
			},

		},
		data() {
			return {
				editing: false,
			};
		},
		methods: {

			edit() {
				this.editing = !this.editing;
				this.$emit("editing", this.editing);
			},
		},
		deactivated() {
			this.editing = false;
		},
	};
</script>
<style lang="scss" scoped>
	.btn {
		display: flex;

		width: 120rpx;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.text {
		font-size: 36rpx;
	}

	.sticky {
		top: 0;
		position: fixed;
		z-index: 2;
	}


	.image {
		width: 64rpx;
		height: 64rpx;
	}
</style>
